<template>
	<view class="nonagent-home-page">
		<view class="fixed-area">
			<view class="top-area">
				<image class="bg-image" src="~@/packageD/static/img/bg.png" mode="scaleToFill"></image>
				<view class="info" :class="[isJXS=='notjxs'?'memberTop':'']">
					<view class="head-image">
						<image v-if="isJXS=='jxs'" class="crown" src="~@/static/img/crown.png"></image>
						<image :src="headUrl" class="tui-avatar"></image>
					</view>
					<view class="head-right">
						<view class="text">{{memberCode}}</view>
						<view class="tag">顾客</view>
					</view>
					<!-- <view class="change-box" v-if="isJXS == 'jxs'">
						<view style="position: relative;">
							<image src="~@/static/img/notice.png" @tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })" class="vip-notice-image"></image>
							<text v-if="unReadFlag" class="notice-point"></text>
						</view>
						<view class="change-text" @tap="jumpToHomePage">
							VIP俱乐部
							<view class="iconfont iconxiangyou"></view>
						</view>
					</view> -->
					<view style="position: relative;">
						<image src="~@/static/img/notice.png" @tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })" class="notice-image"></image>
						<text v-if="unReadFlag" class="notice-point"></text>
					</view>
				</view>
			</view>
			<view class="center-area">
				<view class="rebate">
					<view class="rebate-area" @tap="navTo('/packageD/pages/pointRecord/pointRecord?from=noneAgent')">
						<view class="point">
							<template v-if="nonAgencyRebate.customerPoints>=0">{{nonAgencyRebate.customerPoints}}</template>
							<template v-else>-</template>
						</view>
						<view class="poin-text">我的积分</view>
					</view>
					<view class="rebate-area">
						<view class="point">
							<template v-if="nonAgencyRebate.leftPoints>=0">{{nonAgencyRebate.leftPoints}}</template>
							<template v-else>-</template>
						</view>
						<view class="poin-text">可用积分</view>
					</view>
					<view class="rebate-area">
						<view class="point">
							<template v-if="nonAgencyRebate.customerWillInvalidPoints>=0">{{nonAgencyRebate.customerWillInvalidPoints}}</template>
							<template v-else>-</template>
						</view>
						<view class="poin-text">将过期积分</view>
					</view>
				</view>
				<swiper :indicator-dots="showIndicator" :autoplay="true" interval="3000" class="banner-swiper"
					:circular="true" indicator-color="#fff" indicator-active-color="#E96D71" >
					<swiper-item v-for="(child,key) in imgList" :key="key" @tap="goDetail(child)">
						<image :src="baseUrl+child.homepageCarouselUrl" class="slide-image" mode="scaleToFill" />
					</swiper-item>
				</swiper>
			</view>
			<view class="banner-area">
				<view class="banner-innner" @tap="navTo('/packageD/pages/pointsOrder/pointsOrder?from=noneAgent')">
					<text>我的订单</text>
					<image src="~@/packageD/static/img/ruleBg.png"></image>
				</view>
				<view class="banner-innner" @tap="navTo('/packageD/pages/pointRules/gkPointRules')">
					<text>积分规则</text>
					<image src="~@/packageD/static/img/pointBg.png"></image>
				</view>
			</view>
			
		</view>
		
		<view>
			<view class="search-header">
				<view class="search-box">
					<view class="iconfont iconsousuohome" @tap="comfirmSearch"></view>
					<input class="home-search-text" v-model="searchKey" confirm-type="search"
						placeholder-style="color:#CCCCCC" placeholder="搜索优惠券名称" @confirm="comfirmSearch"
						:adjust-position="false"></input>
					<view class="search-clear iconfont iconguanbi1" v-if="searchKey" @tap="clearSearchKey"></view>
				</view>
			</view>
			<!--筛选区域-->
			<view class="condition-area">
				<view class="exchange-text"
					@tap="navToMyChange">我的可兑
					<view class="iconfont iconxiangyou"></view>
				</view>
				<view class="border-box">
					<view class="condition-item">
						<view class="condition" @tap="changeSaleSort">
							<text>销量</text>
							<view class="icon-wrapper">
								<view class="iconfont iconshangsanjiaoxing" :class="[saleCountSort==0?'red-icon':'']">
								</view>
								<view class="iconfont iconxiasanjiaoxing" :class="[saleCountSort==1?'red-icon':'']">
								</view>
							</view>
						</view>
					</view>
					<view class="condition-item" style="justify-content: center;">
						<view class="condition" @tap="changePointSort">
							<text>积分</text>
							<view class="icon-wrapper">
								<view class="iconfont iconshangsanjiaoxing" :class="[pointSort==0?'red-icon':'']">
								</view>
								<view class="iconfont iconxiasanjiaoxing" :class="[pointSort==1?'red-icon':'']">
								</view>
							</view>
						</view>
					</view>
					<view class="order-condition" @tap="showSider">
						<image src="~@/packageD/static/img/condition.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="bottom-area">
			<view class="category">
				<scroll-view scroll-y scroll-with-animation class="tab-view">
					<view class="tab-view-inner">
						<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :data-current="index" @tap.stop="swichNav(item,index)">
							<view class="item-inner" :class="[currentTabId===item.id ? 'active' : '']">
								{{item.categoryName}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="right-box">
					<!--商品列表-->
					<mescroll-uni ref="mescrollRef" @down="downCallback" :up="upOption" @up="getProductsList" @init="mescrollInit"
						:fixed="false">
						<view class="category-wrap">
							<view class="category-goods" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsDetail(item)">
								<view class="image-box">
									<block v-for="(child,key) in item.nlmCouponImageData" :key="key" v-if="child.imgIndex == -1">
										<image mode="aspectFill" :src="baseUrl+child.imgRelativeUri" class="child-image"></image>
									</block>
									<image v-if="item.couponRemainCount == 0" src="~@/packageD/static/img/saleout.png" class="saleout-image"></image>
								</view>
								<view class="image-text">
									<view class="goods-title">{{item.couponName}}</view>
									<view class="goods-price">
										<text class="point-num">{{item.couponPoints?item.couponPoints:0}}</text>
										<text class="point-text">积分</text>
									</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
				
			</view>
			
		</view>

		<tui-modal></tui-modal>
		<good-sider-condition ref="goodCondition" @touchmove.stop :list="menuList" @result="resultConditon">
		</good-sider-condition>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import goodSiderCondition from '@/packageD/components/goodSiderCondition/goodSiderCondition.vue';
	export default {
		mixins: [MescrollMixin],
		components: {
			goodSiderCondition
		},
		data() {
			return {
				isMember: null,
				unReadFlag: false,//是否有未读消息
				height: 0, //scroll-view高度
				showIndicator: false,
				imgList: [],
				baseUrl: this.$store.state.imgUrl,
				position: uni.getStorageSync('orgLvAb'),
				agencyId: uni.getStorageSync('agencyId'),
				headUrl: '',
				nonAgencyRebate: {}, //积分信息
				searchKey: '',
				scrollTop: 500, //tab标题的滚动条位置
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0,
						size: 10 // 每页数据的数量
					},
					noMoreSize: 2,
					isBounce: false,
				},
				tabbar: [], //左侧栏二级分类
				currentTabId: '',
				mescroll: [],
				subCategoryId: '',
				goodsList: [],
				isJXS: null,
				memberCode: '',
				modalShow: false,
				modalContent: '',
				button: [{
					text: "返回",
					type: "primary",
					plain: false
				}],
				saleCountSort: 1, //销量0升1降
				pointSort: 0, //积分0升1降
				menuList: [{
					'title': '尊享服务',
					'type': 'custom',
					'key': 'isHaveStock',
					'isMutiple': false, //单选
					'detailList': [{
						title: '仅看有货',
						value: "1",
					}],
				}, {
					'title': '积分区间',
					'type': 'pointInterval',
					'key': 'pointInterval',
					'isMutiple': false, //单选
				}],
			}
		},
		onShow() {
			this.getCustomerInfo();
		},
		onLoad(options) {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.height =res.windowHeight - uni.upx2px(860)
				}
			});
			if (uni.getStorageSync('orgLv') !== 'gk') { //不用true,false,防止界面闪现
				this.isMember = 'notgk'
			} else {
				this.isMember = 'gk'
			}
			let orgLv=uni.getStorageSync('orgLv')
			// if(orgLv == 'jxs'||orgLv == 'jl'||orgLv == 'bbz'||orgLv == 'ls'||orgLv == 'fz') {	
			if(orgLv == 'jxs') {	
				this.isJXS = 'jxs';
			} else {
				this.isJXS = 'notjxs';
			}
			this.getCarousel();
			this.getMenuList();
			this.unRead();
		},
		methods: {
			navToMyChange() {
				//我的可兑筛选积分上限为我可用积分内的商品
				let points = this.nonAgencyRebate.leftPoints?this.nonAgencyRebate.leftPoints:0;
				uni.navigateTo({
					url:`/packageD/pages/searchResult/searchResult?from=noneAgent&pre=我的可兑&couponPointsLimit=${points}`
				})
			},
			unRead() {
				//我的消息未读
				this.$http.unRead().then(res => {
					if (res.status === 0) {
						this.unReadFlag = !res.data.isReadedFlag;
					}
				});
			},
			jumpToHomePage() {
				uni.redirectTo({
					url:'/packageD/pages/homePage/homePage'
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				this.getCategoryList();
			},
			getMenuList() {
				let couponType=this.$store.state.dictDataAll.couponType;
				this.menuList.unshift({
					title: '商品分类',
					type: 'custom',
					key: 'couponType',
					isMutiple: false, //单选
					detailList: couponType.map(i => ({
						title: i.dictLabel,
						value: i.dictValue
					}))
				})
			},
			//切换销量排序
			changeSaleSort() {
				if(this.pointSort != '-1') {
					//点击销量时清空积分排序
					this.pointSort = -1;
				}
				if (this.saleCountSort == '-1') {
					this.saleCountSort = 0;
				} else {
					this.saleCountSort = this.saleCountSort == 0 ? 1 : 0;
				}
				this.mescroll.resetUpScroll();
			},
			//切换积分排序
			changePointSort() {
				if(this.saleCountSort != '-1') {
					//点击积分时清空销量排序
					this.saleCountSort = -1;
				}
				if (this.pointSort == '-1') {
					this.pointSort = 0;
				} else {
					this.pointSort = this.pointSort == 0 ? 1 : 0;
				}
				this.mescroll.resetUpScroll();
			},
			//筛选返回值
			resultConditon(obj) {
				const reg = /^[+]{0,1}(\d+)$/;
				if (Object.keys(obj).includes('minNumber')) {
					if (!reg.test(Number(obj.minNumber))) {
						this.$util.toast('积分最小值请输入正整数')
						return;
					}
				}
				if (Object.keys(obj).includes('maxNumber')) {
					if (!reg.test(Number(obj.maxNumber))) {
						this.$util.toast('积分最大值请输入正整数')
						return;
					}
				}
				if (Number(obj.maxNumber) < Number(obj.minNumber)) {
					this.$util.toast('积分区间最小值不能大于最大值');
					return;
				}
				console.log(obj)
				const exportObj = JSON.stringify(obj);
				this.$refs.goodCondition.visibleDrawer = false;
				this.$refs.goodCondition.resetClick();
				uni.navigateTo({
					url: `/packageD/pages/searchResult/searchResult?from=nonAgent&result=${exportObj}&pre=筛选结果`
				})
			},
			//显示筛选弹窗
			showSider() {
				this.$refs.goodCondition.visibleDrawer = true;
			},
			comfirmSearch() {
				console.log(this.searchKey)
				uni.navigateTo({
					url: `/packageD/pages/searchResult/searchResult?from=nonAgent&&couponName=${this.searchKey}&pre=搜索结果`
				})
				this.searchKey = '';
			},
			clearSearchKey() {
				this.searchKey = '';
				// uni.navigateTo({
				// 	url: `/packageD/pages/searchResult/searchResult?from=nonAgent&&couponName=${this.searchKey}&pre=搜索结果`
				// })
			},
			getCustomerInfo() {
				//获取用户信息
				let that = this;
				let params={
					type:1,
				}
				this.$http.customersIncipient(params).then((res) => {
					if (res.status === 0) {
						this.headUrl = res.data.customer.headimgurl;
						this.memberCode = res.data.customer.memberCode;
						this.customerUserId = res.data.customer.customerUserId;
						uni.setStorageSync('customerUserId', this.customerUserId);
						uni.setStorageSync('memberCode', this.memberCode);
						this.querynonAgencyRebate();
					}
				})
			},
			querynonAgencyRebate() {
				//积分信息
				this.$http.getNonAgencyRebate().then((res) => {
					if (res.status == 0) {
						if(res.data) {
							this.nonAgencyRebate = res.data;
						}
					}
				})
			},
			getCarousel() {
				// 轮播图
				const params = {
					status: 0, //0:已发布 1:未发布
					displayFlg: 1, //0:经销商积分商城 1:非经销商积分商城
				};
				this.$http.getCarousel(params).then((res) => {
					if (res.status == 0) {
						if (res.data.records && res.data.records.length > 0) {
							this.imgList = res.data.records;
							if (this.imgList.length > 1) {
								this.showIndicator = true;
							} else {
								this.showIndicator = false;
							}
						}
					}
				})
			},
			swichNav(item, index) { //二级分类切换
				let cur = item.id;
				if (this.currentTabId == cur) {
					return false;
				} else {
					this.currentTabId = cur;
					this.subCategoryId = cur;
				}
				this.getProductsList({
					size: 10,
					num: 1
				});
			},
			//分类列表
			getCategoryList() {
				const params = {
					type: 1, //0经销商 1非经销商
					current: 1,
					pageSize: 10000
				}
				this.$http.getTNlmGoodsCategory(params).then((res) => {
					if (res.status === 0) {
						if (res.data.records.length > 0) {
							this.tabbar = res.data.records.filter(i => i.categoryStatus == 1);
							this.currentTabId = this.tabbar[0].id;
							this.subCategoryId = this.currentTabId;
							this.getProductsList({
								size: 10,
								num: 1
							});
						}
					}
				})
			},
			getProductsList(page) {
				//产品一览取得
				let params = {
					current: page.num,
					pageSize: page.size,
					categoryId: this.subCategoryId,
					shelfFlg:1,//'上架'
				};
				
				if (this.saleCountSort != '-1') {
					params.saleCountSort = this.saleCountSort;
				}
				if (this.pointSort != '-1') {
					params.pointSort = this.pointSort;
				}
				console.log(params)
				if (this.subCategoryId) {
					this.$http.getTNlmCoupon(params).then((res) => {
						if (res.status === 0) {
							let curPageData = res.data.records;
							this.mescroll.endSuccess(curPageData.length);
							if (page.num == 1) {
								this.goodsList = [];
							};
							this.goodsList = this.goodsList.concat(curPageData);
							console.log(this.goodsList)
						} else {
							this.mescroll.endErr()
						}
					}).catch(() => {
						this.mescroll.endErr()
					});
				} else {
					this.mescroll.endSuccess(0);
					this.mescroll.endErr();
				}
			},
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/packageD/pages/pointGoodsDetail/pointGoodsDetail?from=nonAgent&id=${item.couponId}`
				})
			},
			goDetail(item) {
				if(item.pageType == 0) {
					uni.navigateTo({
						url: `/packageD/pages/pointGoodsDetail/pointGoodsDetail?from=nonAgent&id=${item.homepageCarouselLink}`
					})
				} else {
					uni.navigateTo({
						url:`/packageA/pages/activityPage/activityPage?id=${item.homepageCarouselLink}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.nonagent-home-page {
		overflow-x: hidden;
		position: relative;
		height: 100vh;
		.sticky-box {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			flex-direction: column;
			position: -webkit-sticky;
			/* #endif */
			position: sticky;
			top: 0rpx;
			z-index: 990;
			
		}

		.fixed-area {
			// position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}

		.top-area {
			height: 270rpx;
			position: relative;

			.bg-image {
				width: 100%;
				height: 100%;
			}
			
			.memberTop {
				top: 18% !important;
			}

			.info {
				padding: 0 32rpx;
				position: absolute;
				top: 22%;
				display: flex;
				width: 100%;
				align-items: center;

				.head-image {
					position: relative;

					.crown {
						width: 100rpx;
						height: 60rpx;
						position: absolute;
						top: -44rpx;
						left: 50%;
						margin-left: -50rpx;
						z-index: 10;
					}
				}
				
				.notice-image {
					width: 40rpx;
					height: 40rpx;
					// filter: brightness(0.1);
				}
				.notice-point {
					width: 14rpx;
					height: 14rpx;
					background-color: #E94732;
					border-radius: 50%;
					display: block;
					position: absolute;
					top: -8rpx;
					right: -8rpx;
				}

				.head-right {
					flex: 1;
					width: 100%;
					align-items: center;
					margin-left: 32rpx;

					.text {
						color: #111;
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}

					.tag {
						width: 100rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #EA655E;
						border-radius: 22rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						background-color: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
					}
				}
				
				.change-box {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.vip-notice-image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
				
				.change-text {
					color: #111;
					font-size: 28rpx;
					display: flex;
					align-items: baseline;
					.iconfont {
						color: #111111;
						font-weight: 600;
					}
				}

				.notice {
					font-size: 40rpx;
					color: #111111;
				}
			}
		}

		.center-area {
			position: absolute;
			top: 200rpx;
			left: 0;
			right: 0;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			background-color: #FFFFFF;
			padding: 24rpx 32rpx 24rpx;
			height: 290rpx;

			.rebate {
				display: flex;
				justify-content: space-between;
				margin-bottom: 14rpx;

				.rebate-area {
					color: #111111;
					font-size: 38rpx;
					text-align: center;
					
					.point {
						font-weight: 600;
					}

					.poin-text {
						font-size: 28rpx;
					}
				}
			}

			.banner-swiper {
				width: 100%;
				height: 140rpx;
				border-radius: 12rpx;
				overflow: hidden;

				.slide-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.banner-area {
			margin-top: 220rpx;
			padding: 30rpx 32rpx 26rpx 32rpx;
			display: flex;
			justify-content: space-between;

			.banner-innner {
				position: relative;

				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #111;
					position: absolute;
					top: 32rpx;
					left: 24rpx;
					z-index: 999;
				}

				image {
					width: 328rpx;
					height: 140rpx;
				}
			}
		}

		.search-header {
			width: 110%;
			height: 106rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;

			.search-box {
				width: 90%;
				height: 60rpx;
				border-radius: 80rpx;
				font-size: 24rpx;
				border: 2rpx solid $themeColor1;
				padding: 16rpx;
				box-sizing: border-box;
				color: #999;
				display: flex;
				align-items: center;
				overflow: hidden;
			}

			.home-search-text {
				flex: 1;
				font-size: 28rpx;
				color: #CCCCCC;
				margin-left: 6rpx;
			}

			.search-clear {
				padding: 10rpx;
				font-size: 30rpx;
			}
		}
		
		.condition-area {
			padding-right: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			position: relative;
			
			&::after{
				position: absolute;
				z-index: 3;
				left: 204rpx;
				top: auto;
				bottom: 0;
				right: 32rpx;
				height: 0;
				content: '';
				border-bottom: 2rpx solid #f2f2f2;
			}
		
			.exchange-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 16rpx;
				background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
				border-radius: 0rpx 30rpx 30rpx 0rpx;
				color: #fff;
				font-size: 28rpx;
				margin-bottom: 18rpx;
			}
		
			.border-box {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 28rpx;
				position: relative;
			}
		
			.condition-item {
				width:33%;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.condition {
					display: flex;
		
					text {
						font-size: 28rpx;
						color: #111;
					}
		
					.icon-wrapper {
						margin-left: 8rpx;
						margin-top: -3rpx;

						.iconfont {
							font-size: 16rpx;
							color: #DDDDDD;
						}
		
						.red-icon {
							color: #EA655E;
						}
					}
				}
			}
		
			.order-condition {
				width: 30%;
				image {
					width: 28rpx;
					height: 28rpx;
					float: right;
				}
			}
		}
		

		.bottom-area {
			// margin-top: 866rpx;

			.category {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				background: #fff;

				.tab-view {
					width: 196rpx;
					background: transparent;
					height: 100%;
					// position: fixed;
					left: 0;
					z-index: 10;
					height: calc(100vh - 180rpx);

					.tab-view-inner {
						width: 180rpx;
						min-height: 100%;
						background: #F5F5F5;
						box-sizing: border-box;
						padding-top: 18rpx;
					}

					.tab-bar-item {
						width: 180rpx;
						height: 96rpx;
						box-sizing: border-box;

						font-size: 28rpx;
						color: #666666;
						position: relative;

						.item-inner {
							width: 100%;
							height: 100%;
							line-height: 96rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							padding: 0 20rpx;

							&.active {
								font-weight: 600;
								background-color: #fff;
								color: #000 !important;
								font-size: 30rpx;
								position: absolute;
								left: 0;
								top: 2rpx;
								width: 188rpx;
								height: 92rpx;

								border-radius: 0rpx 20rpx 20rpx 0;
								box-shadow: 0px 2rpx 12rpx 0px rgba(0, 0, 0, 0.1);

								&::before {
									content: "";
									position: absolute;
									height: 96rpx;
									left: 0;
									border-left: 8rpx solid #EA655E;
								}
							}
						}
					}

				}

			}

			/* 隐藏scroll-view滚动条*/
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
				display: none;
			}


			/* 左侧导航布局 end*/
			.right-box {
				background: #fff;
				flex: 1;
				min-width: 0;
				height: calc(100vh - 180rpx);

				.mescroll-empty {
					padding-bottom: 50%;
				}

			}

			.category-banner {
				width: 100%;
				height: 164rpx;
				background: #f5f5f5;
				overflow: hidden;

				image {
					width: 100%;
					height: 160rpx;
				}
			}

			.mescroll-uni-warp {
				min-height: 100%;
			}

			.mescroll-uni-content {
				height: 100%;
			}

			.mescroll-uni {
				padding-bottom: constant(safe-area-inset-bottom) !important;
				padding-bottom: env(safe-area-inset-bottom) !important;
				// background-color: #FDFCFC;
			}

			.category-wrap {
				padding: 0 5rpx;
				width: 100%;

				.category-goods {
					width: 46%;
					float: left;
					background-color: #fff;
					box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(143, 97, 95, 0.1);
					box-sizing: border-box;
					padding: 10rpx;
					border-radius: 10rpx;

					&:nth-child(2n+1) {
						margin: 0rpx 2% 16rpx 0;
					}

					&:nth-child(2n) {
						margin: 0rpx 0 16rpx 2%;
					}

					&:nth-child(1),
					&:nth-child(2) {
						margin-top: 20rpx;
					}

					.image-box {
						width: 100%;
						height: 164rpx;
						margin-bottom: 8rpx;
						overflow: hidden;
						border-radius: 8rpx;
						position: relative;

						.child-image {
							width: 100%;
							height: 100%;
						}
						
						.saleout-image {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 120rpx;
							height: 120rpx;
							margin-left: -60rpx;
							margin-top: -60rpx;
						}
					}

					.image-text {
						padding: 0 4rpx;

						.goods-title {
							color: #121212;
							font-size: 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							height: 64rpx;
							line-height: 34rpx;
							font-weight: bold;
						}

						.goods-price {
							color: #E8374A;
							font-size: 26rpx;
							font-weight: 600;

							.point-text {
								margin-left: 8rpx;
								font-size: 22rpx;
								// font-weight: 400;
							}
						}
					}

				}
			}
		}
	}
</style>
